import React from 'react';
import { Tabs } from 'antd';
import ScriptEditor from '../../../../components/ScriptEditor';

const { TabPane } = Tabs;

export default function Code(props) {
  const { operation_log_request, operation_log_response } = props.record

  const renderValue = (value) => {
    let str = ''
    if (typeof value === 'string') {
      try {
        str = JSON.stringify(JSON.parse(value), null, 4)
      } catch {
        str = value
      }
    }
    return str
  }

  return (
    <div>
      <Tabs defaultActiveKey="1">
        <TabPane tab="Request" key="1">
          <ScriptEditor
            value={renderValue(operation_log_request)}
            disabled
            mode={{ name: 'javascript', json: true }}
          />
        </TabPane>
        <TabPane tab="Response" key="2">
          <ScriptEditor
            value={renderValue(operation_log_response)}
            disabled
            mode={{ name: 'javascript', json: true }}
          />
        </TabPane>
      </Tabs>,
    </div>
  )
}